<template>
    <example :template-code="templateString">
        <template #describe>
            <t :id="`${$t('必填校验')}`">{{ $t('必填校验') }}</t>
            <li>
                给控件对象配置<span class="s-code">required</span>为<span class="s-code">true</span>即可启用该控件的必填校验；
                组件内部会根据控件类型和值类型动态制定必填规则
            </li>
        </template>
        <sib-form :fields="fields" @submit="submit" style="width: 500px;">
        </sib-form>
    </example>
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const fields = ref([
            {
                label: '账号',
                code: 'account',
                type: 'text',
                maxlength: 30,
                required: true,
            },
            {
                label: '密码',
                code: 'password',
                type: 'password',
                maxlength: 8,
                required: true,
            },
            {
                label: '所属角色',
                code: 'role',
                type: 'table',
                required: true,
                searchConfig: {
                    fields: [{ label: '角色名称', code: 'name', type: 'text' }],
                },
                tableColumn: [
                    { label: '角色名称', code: 'name' },
                    { label: '角色编码', code: 'code' },
                ],
                tableData: [
                    { name: '张三', code: '001', id: '1' },
                    { name: '李四', code: '002', id: '2' },
                    { name: '王五', code: '003', id: '3' },
                    { name: '奔跑的提款机', code: '666', id: '4' },
                    { name: '二蛋快跑别管我', code: '004', id: '5' },
                    { name: '望哥', code: '005', id: '6' },
                    { name: '旗鼓相当的对手', code: '006', id: '7' },
                ],
            },
            {
                label: '菜单权限',
                code: 'menuAuth',
                type: 'tree',
                required: true,
                filterable: true,
                showCheckbox: true,
                requestConfig: {
                    url: '/api/tree-data.json',
                    method: 'get',
                    params: {},
                },
            },
        ]);

        const submit = (form, cb) => {
            console.log('form: ', form);
            setTimeout(cb, 3000);
        };

        return {
            fields,
            submit,
            templateString: `<template>
    <sib-form :fields="fields" @submit="submit" style="width: 500px;"></sib-form>
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const fields = ref([
            {
                label: '账号',
                code: 'account',
                type: 'text',
                maxlength: 30,
                required: true,
            },
            {
                label: '密码',
                code: 'password',
                type: 'password',
                maxlength: 8,
                required: true,
            },
            {
                label: '所属角色',
                code: 'role',
                type: 'table',
                required: true,
                searchConfig: {
                    fields: [{ label: '角色名称', code: 'name', type: 'text' }],
                },
                tableColumn: [
                    { label: '角色名称', code: 'name' },
                    { label: '角色编码', code: 'code' },
                ],
                tableData: [
                    { name: '张三', code: '001', id: '1' },
                    { name: '李四', code: '002', id: '2' },
                    { name: '王五', code: '003', id: '3' },
                    { name: '奔跑的提款机', code: '666', id: '4' },
                    { name: '二蛋快跑别管我', code: '004', id: '5' },
                    { name: '望哥', code: '005', id: '6' },
                    { name: '旗鼓相当的对手', code: '006', id: '7' },
                ],
            },
            {
                label: '菜单权限',
                code: 'menuAuth',
                type: 'tree',
                required: true,
                filterable: true,
                showCheckbox: true,
                requestConfig: {
                    url: '/api/tree-data.json',
                    method: 'get',
                    params: {},
                },
            },
        ]);

        const submit = (form, cb) => {
            console.log('form: ', form);
            setTimeout(cb, 3000);
        };

        return { fields, submit };
    },
};
<\/script>`,
        };
    },
};
</script>
